<template>
  <div class="login-container">
    <div class="login-box">
      <div class="login-title-box">
        <h3>后台管理系统</h3>
      </div>
      <el-form ref="loginRef" :model="loginForm" :rules="loginRules">
        <el-form-item prop="email">
          <el-input
            v-model="loginForm.email"
            placeholder="请输入邮件地址"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="loginForm.password"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="loginFn" class="btn-login"
            >登录</el-button
          >
          <el-link type="primary" @click="$router.push('/reg')">去注册</el-link>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { loginAPI } from "@/api/index";
import { mapMutations } from "vuex";

export default {
  name: "my-login",
  data() {
    return {
      loginForm: {
        email: "",
        password: "",
      },
      loginRules: {
        email: [
          { required: true, message: "请输入email", trigger: "blur" },
          {
            pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
            message: "email格式不正确",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            pattern: /^[\S]{6,10}$/,
            message: "密码必须为6-10个非空字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    ...mapMutations(["updateToken"]),
    loginFn() {
      this.$refs.loginRef.validate((valid) => {
        if (valid) {
          // console.log(this.loginForm);
          loginAPI(this.loginForm)
            .then((response) => {
              if (response.data.accessToken) {
                this.$message.success(`${response.data.user.email} 登录成功`);
                this.updateToken(response.data.accessToken);
                this.$router.push("/layout");
                // console.log(response.data.accessToken);
              } else {
                this.$message.success(response.statusText);
              }
            })
            .catch((error) => {
              this.$message.error(error.response.data);
            });
        } else {
          return false;
        }
      });
    },
  },
};
</script>


<style scoped>
.login-container {
  background: url("../../assets/images/login_bg.jpg") center;
  background-size: cover;
  height: 100%;
}

.login-box {
  width: 400px;
  height: 350px;
  background-color: #fff;
  border-radius: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 0 20px;
  box-sizing: border-box;
}

.login-title-box {
  height: 40px;
  /* background-color: beige; */
  margin-bottom: 10px;
}

.login-title-box h3 {
  font-size: 27px;
  letter-spacing: 7px;
  font-family: "Microsoft YaHei";
  text-align: center;
  color: #00bfff;
}

.el-form-item {
  margin-bottom: 20px;
}

.btn-login {
  width: 100%;
}
</style>